<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red1 {
            color: red;
        }
    </style>
</head>

<body>
    <!-- html写这里  -->
    <div>
        <!--  -->
        <div id="app">
            <header1>
                <div slot-scope='props'>
                    <!-- 第一个办法 在本组件内重新请求数据  全局发了2次axios请求 -->
                    <!-- <div>{{obj2.temperaturenow}}℃ 空气质量 {{obj2.airquality}} </div> -->
                    <!-- 全局发了 1次axios请求 -->
                    <div>{{props.info.temperaturenow}}℃ 空气质量 {{props.info.airquality}} </div>
                </div>
            </header1>
            <h1>我是继续下面的页面</h1>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 开始写vue的核心代码 -->
        <script>
            // 外来的组件 实际工作中写在别的页面上
            Vue.component('header1', {
                data() {
                    return {

                        obj: {

                        }

                    }
                },
                // 外来的组件header1 有三个数据  然后自己用了两个  有一个没用  
                template: `
            <div>
                <div class='red1'> {{obj.city}}今天{{obj.weather}}温度 {{obj.temperaturerange}}{{obj.wind}}</div>
                <slot :info='obj'></slot>
            </div>
            `,
                created() {
                    console.log('header1 created')
                    //  模拟  axios请求  http   /weather
                    // 发送了一次axios请求了
                    var res = [{
                        // 没用
                        pm25: '27',
                        temperaturenow: 28,      
                        airquality: '优',
                    //   用了的
                        weather: '多云',
                        city: '上海', 
                        temperaturerange: '27-33'
                    }]
                    this.obj = res[0]
                    // this.weather = res[0].weather
                    // this.temperature = res[0].temperature
                    // this.city = res[0].city
                    // console.log('city', this.city)

                },

            })

            var vm = new Vue({
                // 传入监管哪个容器
                el: '#app',
                // 这个容器所需要的数据
                data: {
                    msg: '',
                    msg2: '你好世界',
                    obj2:{}
                },
                beforeCreate() { console.log('主页面 beforeCreate') },
                created() {
                    //  axios 请求  http   /weather 
                    // var res = [{
                    //     pm25: '27',
                    //     temperaturenow: 28,      
                    //     airquality: '优',
                    //     weather: '多云',
                    //     city: '上海', 
                    //     temperaturerange: '27-33'
                    // }]
                    // this.obj2 = res[0]
                },

            })
            console.log('vm', vm)
        </script>
</body>

</html>